<template>
  <uni-nav-bar title="员工" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package">{{name}}({{shopID}})</view>
  <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
    :style="{ height: pageHeight + 'px' }">
    <FriendList :frinedList="frinedList" :show="true" @del="del"></FriendList>
  </scroll-view>
  <view @click="navTo('administrator/business/addStaff?id='+shopID)" class="add">添加员工</view>
</template>

<script setup lang="ts">
  import { navBack, navTo } from '@/utils/navigator';
  import { ref } from 'vue';
  import FriendList from '@c/administrator/List/friendList.vue';
  import { toPublish } from '@mqtt';
  import { onShow, onLoad } from '@dcloudio/uni-app';
  import { getStoreUserList } from '@/gql/administrator';
  import { showLoading, errorToast, successToast } from '@/utils/prompt';
  const pageHeight = ref();
  const frinedList = ref([])
  const lastPage = ref(1);
  const currentPage = ref(1);

  const name = ref()
  const shopID = ref()
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = res.windowHeight - 180;
    },
  });
  onLoad((pearm) => {
    name.value = pearm.name
    shopID.value = Number(pearm.id)
    init()
  })
  onShow(() => {
    if (!shopID.value) {
      return
    }
    currentPage.value = 1;
    frinedList.value = [];
    init();
  })
  /**
    * 获取车友列表
    */
  function init() {
    showLoading()
    const payload = {
      query: getStoreUserList,
      variables: {
        page: currentPage.value,
        store_id: shopID.value
      },
    };
    toPublish(
      'ql/control/getStoreUserList',
      payload,
      (obj : any) => {
        uni.hideLoading();
        const { getStoreUserList } = obj.data;
        frinedList.value = [...frinedList.value, ...getStoreUserList.list];
        lastPage.value = getStoreUserList.lastpage;
      }
    );
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      init();
    }
  }
  function del(id) {
    showLoading()
    const payload = {
      id,
    };
    toPublish(
      'control/delStoreUser',
      payload,
      (obj : any) => {
        const { code, msg } = obj;
        if (code === 1) {
          successToast(msg)
          frinedList.value = frinedList.value.filter((item) => item.id == id ? item = null : item)
        } else {
          errorToast(msg)
        }
      }
    );
  }
  // function jump(id : number) {
  //   navTo('administrator/sale/saleDetail?id=' + id)
  // }
</script>

<style scoped lang="less">
  .add {
    width: 480rpx;
    height: 100rpx;
    background: linear-gradient(-10deg, #2C96F9, #1B91FF);
    border-radius: 5px;
    text-align: center;
    line-height: 100rpx;
    color: #fff;
    margin: 20rpx auto;
    font-size: 32rpx;
  }
</style>